Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 409 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Leap Year Checker</title>
</head>
<style>
      * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            box-sizing: border-box;
      }

      form {
            width: 400px;
            text-align: center;
            padding: 20px 0 0px 0;
            border-radius: 4px;
            box-shadow: 0 3px 4px #f1f1f1;
            background-color: #fff;
      }


      body {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: rgba(0, 0, 255, 0.315);
background: url(https://images.unsplash.com/photo-1514826786317-59744fe2a548?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bWFjYm9vayUyMHByb3xlbnwwfHwwfHw%3D&w=1000&q=80) no-repeat center;
background-size: cover;
      }

      .result {
            margin-top: 20px;
            padding: 0 5px 10px 5px;
      }

      span {
            font-size: 20px;
            letter-spacing: 5px;
            color: #000;
      }

      input {
            padding: 10px 20px 10px 10px;
            outline: none;
            width:90%;
            border: 2px solid gray;
            font-weight: bold;
            letter-spacing: 4px;
            border-radius: 5px;
            box-shadow: inset 0 3px 4px cornflowerblue;
      }
  .btn{
        margin-top: 20px;
  }
      button {
            padding: 13px 1rem;
            outline: none;
            font-weight: bold;
            border: none;
            background-color: cadetblue;
            color: #fff;
            cursor: pointer;
            text-transform: capitalize;
            border-radius: 5px;
            box-shadow: inset 0 3px 4px cornflowerblue;
      }
      #reset{
            background-color: crimson;
      }
</style>

<body>
      <form action="">
            <input type="number" id="input" placeholder="Enter any number to chek leap or not">
               <div class="btn">
                  <button id="btn">check leapyear</button>
                  <button id="reset">Reset</button>
               </div>
            <div class="result">
                  <span id="result"></span>
            </div>
      </form>

</body>

<script>

      const btn = document.getElementById('btn');
      const result = document.getElementById('result');


      btn.addEventListener('click', function (e) {
            const input = document.getElementById('input').value;

            e.preventDefault();

            if(input == ''){
                  alert("please enter a valid number");
            }
            else if (input % 400 == 0 && input % 100 ==0) {

                  result.innerText = `The enter number ${input} is leap year`;

            }
		
		else if ((input % 4 ==0) &&  (input % 100 != 0) ) {result.innerText = `The enter number ${input} is leap year`;}
            else {

                  result.innerText = `The enter number ${input} is not leap year`;
            }


      })


</script>


</html>

Share this file: